<template>
  <div class="joe_main">
    <div class="joe_detail" data-cid="1223">

      <h1 class="joe_detail__title">友链</h1>
      <div class="joe_detail__count">
        <div class="joe_detail__count-information">
          <img width="35" height="35" class="avatar ls-is-cached lazyloaded"
               src="@/assets/avatar/right-avatar.jpg"
               data-src="@/assets/avatar/right-avatar.jpg" alt="Mr. Chen">
          <div class="meta">
            <div class="author">
              <a class="link" href="/personalHome/chenshuang" title="Mr. Chen">Mr. Chen</a>
            </div>
            <div class="item">
              <span class="text">2021-09-01</span>
              <span class="line">/</span>
              <span class="text">10 评论</span>
              <span class="line">/</span>
              <span class="text" id="Joe_Article_Views">2,588 阅读</span>
            </div>
          </div>
        </div>
        <time class="joe_detail__count-created" datetime="02/21">09/01</time>
      </div>
      <article class="joe_detail__article">

        <blockquote>
          1、站内不能含有非法、采集、商业或不良内容；
          <br>
          2、如果长时间无法访问 或 未添加本站链接将会 自动删除友链，恕不另行通知；
          <br>
          3、申请链接前请先 添加本站链接
          <br>
          4、添加本站友链后直接在下方申请提交你的站点信息或者在<a href="https://www.wxmin.cn/leavingMessage">《留言》</a>中根据 [站点信息] 格式进行留言


        </blockquote>
        <section style="margin-bottom: 15px">
            <span class="_content">
                <div class="joe_tabs">
                    <div class="joe_tabs__head">
                      <div :class="tabsHeadItemFlag ? 'joe_tabs__head-item active' : 'joe_tabs__head-item'" label="站点信息"
                           @click="tabsHeadItemFlag = !tabsHeadItemFlag">站点信息</div>
                      <div :class="!tabsHeadItemFlag ? 'joe_tabs__head-item active' : 'joe_tabs__head-item'"
                           label="Joe格式" @click="tabsHeadItemFlag = !tabsHeadItemFlag">友链申请</div>
                    </div>
                    <div class="joe_tabs__body">
                      <div :style="tabsHeadItemFlag ? 'display: block;' : 'display: none;'" class="joe_tabs__body-item"
                           label="站点信息">
                        <pre class="language-bash" tabindex="0"><code class="language-bash">网站名称： June 12
网站地址： https://www.wxmin.cn
网站图标： https://www.wxmin.cn:9000/ants-file/imgUrl/logo_1661824383783.png
网站说明： June 12，小陈的个人博客。记录所学知识，分享开发经验！</code><span class="copy">
                          <i class="fa fa-clone"></i></span></pre></div>
                      <div :style="!tabsHeadItemFlag ? 'display: block;' : 'display: none;'" class="joe_tabs__body-item"
                           label="Joe格式">
                        <span style="color:red;">友情提示：请认真填写信息，提交申请之后会有管理员进行审核，审核通过会展示在页面最下方！</span>
                        <pre class="  language-bash" tabindex="0"><code class="  language-bash"><a-spin
                          :spinning="confirmLoading">
<ants-form-container :disabled="false"> <a-form slot="detail" :form="form"><a-form-item label="" :label-col="labelCol"
                                                                                        :wrapper-col="wrapperCol"
                                                                                        style="margin-bottom: 0">
                            <a-input v-decorator="['email', validatorRules.email]" placeholder="请输入邮箱，以便于接收通知"/>
                          </a-form-item><a-form-item label="" :label-col="labelCol" :wrapper-col="wrapperCol"
                                                     style="margin-bottom: 0"> <a-input
  v-decorator="['name', validatorRules.name]" placeholder="请输入网站名称"/>
                          </a-form-item><a-form-item label="" :label-col="labelCol" :wrapper-col="wrapperCol"
                                                     style="margin-bottom: 0">
                            <a-input v-decorator="['link', validatorRules.link]"
                                     placeholder="请输入网站链接，示例：https://www.wxmin.cn">
<!--                              <a-select slot="addonBefore" style="width: 90px"-->
                              <!--                                        v-decorator="['linkPrefix', { initialValue: 'Http://' }]">-->
                              <!--                                <a-select-option value="Http://">-->
                              <!--                                  Http://-->
                              <!--                                </a-select-option>-->
                              <!--                                <a-select-option value="Https://">-->
                              <!--                                  Https://-->
                              <!--                                </a-select-option>-->
                              <!--                              </a-select>-->
                            </a-input>
                          </a-form-item><a-form-item label="" :label-col="labelCol" :wrapper-col="wrapperCol"
                                                     style="margin-bottom: 0">
                            <a-input v-decorator="['webLogo', validatorRules.webLogo]"
                                     placeholder="请输入网站LOGO链接，示例：https://www.wxmin.cn:9000/ants-file/imgUrl/ants-logo_1646189662020.png">
<!--                              <a-select slot="addonBefore" style="width: 90px"-->
                              <!--                                        v-decorator="['webLogoPrefix', { initialValue: 'Http://' }]">-->
                              <!--                                <a-select-option value="Http://">-->
                              <!--                                  Http://-->
                              <!--                                </a-select-option>-->
                              <!--                                <a-select-option value="Https://">-->
                              <!--                                  Https://-->
                              <!--                                </a-select-option>-->
                              <!--                              </a-select>-->
                            </a-input>
                          </a-form-item><a-form-item label="" :label-col="labelCol" :wrapper-col="wrapperCol"
                                                     style="margin-bottom: 10px">
                            <a-textarea
                              v-decorator="['webDescribe']"
                              placeholder="请输入网站描述"
                              :auto-size="{ minRows: 6, maxRows: 10 }"
                            />
                          </a-form-item> <a-button style="float: right;overflow: hidden;" icon="link"
                                                   @click="submitForm">
                            提交申请
                          </a-button></a-form></ants-form-container>
                </a-spin></code><span class="copy"><i class="fa fa-clone"></i></span></pre>
                      </div>
                    </div>
                </div>
            </span>
        </section>
      </article>


      <ul class="joe_detail__friends">
        <li class="joe_detail__friends-item">
          <a class="contain" href="https://wxmin.cn/" target="_blank" rel="noopener noreferrer"
             style="background: #6fa3ef">
            <span class="title">June 12</span>
            <div class="content">
              <div class="desc">本站管理员主页</div>
              <img width="40" height="40" class="avatar ls-is-cached lazyloaded"
                   src="https://www.wxmin.cn:9000/ants-file/imgUrl/logo_1661824383783.png"
                   data-src="https://www.wxmin.cn:9000/ants-file/imgUrl/logo_1661824383783.png" alt="June 12">
            </div>
          </a>
        </li>
        <template v-for="item in friendLinks">
          <li class="joe_detail__friends-item">
            <a class="contain" :href="item.link" target="_blank" rel="noopener noreferrer"
               :style="{background: getColor()}">
              <span class="title">{{ item.name }}</span>
              <div class="content">
                <div class="desc">
                  <ants-ellipsis :value="item.webDescribe" :length="40"/>
                </div>


                <el-image :src="item.webLogo" class="avatar ls-is-cached lazyloaded">
                  <div slot="error" class="image-slot">
                    <img width="40" height="40" class="avatar ls-is-cached lazyloaded"
                         src="@/assets/images/load_img.gif"/>
                  </div>
                </el-image>
              </div>
            </a>
          </li>
        </template>
      </ul>

      <div class="joe_detail__copyright">
        <div class="content">
          <div class="item">
            <svg class="icon" width="20" height="20" viewBox="0 0 1024 1024">
              <path
                d="M614.72 554.538c-49.086-6.399-100.27-2.1-149.256-2.1-119.465 0-209.04 95.972-206.84 215.437 0 17.095 8.498 31.99 23.493 40.488 14.896 10.697 34.09 14.896 53.285 17.095 61.882 6.398 123.664 6.398 198.342 6.398 40.488 0 93.872-2.1 142.858-4.298 27.692 0 53.284-4.3 78.877-14.896 19.194-8.498 29.89-19.194 31.99-40.488 8.498-104.57-72.478-204.84-172.75-217.636zM680.8 375.39c0-87.474-74.678-162.053-164.251-162.053-89.574 0-162.053 74.679-162.053 162.053-2.1 87.474 74.678 164.252 162.053 164.252 89.673 0 164.252-74.678 164.252-164.252z"
                fill="#FFF"></path>
              <path
                d="M512.35 0C228.733 0 .5 228.233.5 511.85s228.233 511.85 511.85 511.85 511.85-228.233 511.85-511.85S795.967 0 512.35 0zm275.12 772.074c-2.1 21.294-12.797 31.99-31.991 40.488-25.593 10.697-51.185 14.896-78.877 14.896-49.086 2.099-102.37 4.298-142.858 4.298-74.678 0-136.46 0-198.342-6.398-19.195-2.1-38.389-6.398-53.285-17.095-14.895-8.497-23.493-23.493-23.493-40.488-2.1-119.465 87.475-215.437 206.84-215.437 49.085 0 100.27-4.299 149.256 2.1 100.27 12.896 181.247 113.166 172.75 217.636zM354.495 375.39c0-87.474 72.479-162.053 162.053-162.053S680.8 288.016 680.8 375.39c0 89.574-74.679 164.252-164.252 164.252-87.375 0-164.152-76.778-162.053-164.252z"
                fill="#249FF8"></path>
            </svg>
            <span>版权属于：</span>
            <span class="text">Mr. Chen</span>
          </div>
          <div class="item">
            <svg class="icon" width="20" height="20" viewBox="0 0 1024 1024">
              <path d="M511.854 0A511.854 511.854 0 1 0 1024 511.854 511.854 511.854 0 0 0 511.854 0z"
                    fill="#39B54A"></path>
              <path
                d="M576.491 630.355L460.028 746.818a129.565 129.565 0 0 1-182.555 0l-2.038-2.038a128.983 128.983 0 0 1 0-182.264l81.233-81.233a179.644 179.644 0 0 0 13.102 70.46l-52.7 52.408a69.878 69.878 0 0 0 0 98.703l2.038 2.038a70.169 70.169 0 0 0 98.703 0l116.463-116.463a69.878 69.878 0 0 0 0-98.703l-2.039-2.038a69.587 69.587 0 0 0-13.975-10.772l42.509-42.51a128.11 128.11 0 0 1 13.102 11.356l2.038 2.038a129.274 129.274 0 0 1 0 182.264z"
                fill="#FFF"></path>
              <path
                d="M746.236 460.902l-81.233 81.233a179.353 179.353 0 0 0-13.102-70.46l52.7-52.409a69.878 69.878 0 0 0 0-98.702l-2.039-2.038a69.878 69.878 0 0 0-98.702 0L487.397 434.989a69.878 69.878 0 0 0 0 98.702l2.038 2.038a68.422 68.422 0 0 0 13.976 10.773l-42.51 42.51a136.553 136.553 0 0 1-13.101-11.356l-2.038-2.038a128.983 128.983 0 0 1 0-182.265l116.463-116.462a129.565 129.565 0 0 1 182.555 0l2.038 2.038a128.983 128.983 0 0 1 0 182.264z"
                fill="#FFF"></path>
            </svg>
            <span>本文链接：</span>
            <span class="text">
                <a class="link" href="https://www.wxmin.cn/friendLinks" target="_blank"
                   rel="noopener noreferrer nofollow">https://www.wxmin.cn/friendLinks</a>
            </span>
          </div>
        </div>
      </div>
    </div>


  </div>
</template>

<script>
import AntsFormContainer from '@/components/ants/AntsFormContainer'
import {getAction, postAction} from "@/api/manage";
import AntsEllipsis from '@/components/ants/AntsEllipsis'

export default {
  name: "FriendLinks",
  components: {
    AntsEllipsis,
    AntsFormContainer
  },
  data() {
    return {
      form: this.$form.createForm(this),
      model: {},
      labelCol: {
        xs: {span: 0},
        sm: {span: 0}
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 24}
      },
      validatorRules: {
        name: {
          rules: [
            {required: true, message: '请输入网站名称!'}
          ]
        },
        link: {
          rules: [
            {required: true, message: '请输入网站链接!'}
          ]
        },
        email: {
          rules: [
            {required: true, message: '请输入邮箱!'}
          ]
        },
        webLogo: {
          rules: [
            {required: true, message: '请输入网站LOGO链接!'}
          ]
        }
      },
      url: {
        add: '/friendLinks/add',
        initFriendLinks: '/friendLinks/initFriendLinks'
      },
      confirmLoading: false,
      friendLinks: [],

      tabsHeadItemFlag: true
    }
  },
  mounted() {
    this.initFriendLinks()
  },
  methods: {
    // 获取随机色
    getColor() {
      let r = parseInt(Math.random() * 256)
      let g = parseInt(Math.random() * 256)
      let b = parseInt(Math.random() * 256)
      let color = `rgba(${r},${g},${b},0.9)`
      return color
    },
    initFriendLinks() {
      getAction(this.url.initFriendLinks, {state: '1'}).then(res => {
        if (res.success) {
          this.friendLinks = res.result
        }
      })
    },
    submitForm() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          const formData = Object.assign(this.model, values)
          formData.state = '0'
          postAction(that.url.add, formData).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            this.form.setFieldsValue({
              name: '',
              link: '',
              email: '',
              webDescribe: '',
              webLogo: '',
              linkPrefix: 'Http://',
              webLogoPrefix: 'Http://'
            })
            that.confirmLoading = false
          })
        }
      })
    },
    openWindow(url) {
      window.open(url, '_blank')
    }
  }
}
</script>

<style scoped>

</style>
